<template>
    <div>
        <div class="flex-col page">
  <div class="justify-between header">
    <img
      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/622f14ff5a7e3f031097a4ba/622f1ab14fa9330011966385/16474110189226370805.png"
      class="image"
    />
    <span class="text">SETTINGS</span>
    <img
      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/622f14ff5a7e3f031097a4ba/622f1ab14fa9330011966385/16474110189229204359.png"
      class="image_1"
    />
  </div>
  <div class="flex-col group">
    <div class="flex-col group_1">
      <span class="text_1 text_2">GENERAL</span>
      <div class="flex-col section_1">
        <div class="justify-between group_2">
          <div class="flex-row">
            <img
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/622f14ff5a7e3f031097a4ba/622f1ab14fa9330011966385/16474110874101978021.png"
              class="image_2"
            />
            <span class="text_3">Edit Profile</span>
          </div>
          <img
            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/622f14ff5a7e3f031097a4ba/622f1ab14fa9330011966385/16474110874095372435.png"
            class="image_3 image_4"
          />
        </div>
        <div class="justify-between group_4">
          <div class="flex-row">
            <img
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/622f14ff5a7e3f031097a4ba/622f1ab14fa9330011966385/16474110874101436213.png"
              class="image_5"
            />
            <span class="text_4">Change Password</span>
          </div>
          <img
            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/622f14ff5a7e3f031097a4ba/622f1ab14fa9330011966385/16474110874095372435.png"
            class="image_3 image_6"
          />
        </div>
      </div>
      <span class="text_1 text_5">LINKED ACCOUNTS</span>
    </div>
    <div class="flex-col group_6">
      <div class="flex-col section_2">
        <div class="justify-between">
          <div class="flex-row group_8">
            <img
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/622f14ff5a7e3f031097a4ba/622f1ab14fa9330011966385/16474110874090873370.png"
              class="image_7"
            />
            <span class="text_6">Instagram</span>
          </div>
          <span class="text_7">YES</span>
        </div>
        <div class="justify-between group_9">
          <div class="flex-row group_10">
            <img
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/622f14ff5a7e3f031097a4ba/622f1ab14fa9330011966385/16474110874096375125.png"
              class="image_9"
            />
            <span class="text_8">Twitter</span>
          </div>
          <span class="text_1 text_9">NO</span>
        </div>
        <div class="justify-between group_11">
          <div class="flex-row group_12">
            <img
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/622f14ff5a7e3f031097a4ba/622f1ab14fa9330011966385/16474110874091276742.png"
              class="image_10"
            />
            <span class="text_10">Facebook</span>
          </div>
          <span class="text_1 text_11">NO</span>
        </div>
        <div class="justify-between group_13">
          <div class="flex-row group_14">
            <img
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/622f14ff5a7e3f031097a4ba/622f1ab14fa9330011966385/16474110874084553522.png"
              class="image_7"
            />
            <span class="text_12">Linkedin</span>
          </div>
          <span class="text_13">YES</span>
        </div>
        <div class="justify-between group_15">
          <div class="flex-row group_16">
            <img
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/622f14ff5a7e3f031097a4ba/622f1ab14fa9330011966385/16474110874015928865.png"
              class="image_12"
            />
            <span class="text_14">Pinterest</span>
          </div>
          <span class="text_1 text_15">NO</span>
        </div>
      </div>
      <div class="flex-col items-center text-wrapper">
        <span>LOGOUT</span>
      </div>
    </div>
  </div>
</div>
    </div>
</template>

<script>
export default {
  data () {
    return {}
  }
}
</script>

<style scoped>
.text_1 {
  opacity: 0.4;
}
.image_3 {
  width: 0.53rem;
  height: 0.75rem;
}
.image_7 {
  width: 1rem;
  height: 1rem;
}
.page {
  background-color: rgb(222, 222, 222);
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.header {
  padding: 2.09rem 1.16rem 0.69rem 1.19rem;
  color: rgb(0, 0, 0);
  font-size: 0.63rem;
  font-weight: 700;
  line-height: 0.5rem;
  letter-spacing: 0.25rem;
  white-space: nowrap;
  height: 3.84rem;
}
.group {
  padding-top: 1.94rem;
  flex: 1 1 auto;
  overflow-y: auto;
}
.image {
  margin: 0.19rem 0 0.25rem;
  width: 1.09rem;
  height: 0.63rem;
}
.text {
  align-self: center;
}
.image_1 {
  width: 1.06rem;
  height: 1.06rem;
}
.group_1 {
  padding: 0 3.13rem;
}
.group_6 {
  margin-top: 1.38rem;
}
.text_2 {
  color: rgb(0, 0, 0);
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 0.44rem;
  letter-spacing: 0.12rem;
  white-space: nowrap;
}
.section_1 {
  margin-top: 1.38rem;
  padding: 2.19rem 1.38rem 2.25rem;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1.56rem 1.56rem rgba(0, 0, 0, 0.1);
}
.text_5 {
  margin-top: 2.31rem;
  color: rgb(0, 0, 0);
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 0.44rem;
  letter-spacing: 0.12rem;
  white-space: nowrap;
}
.section_2 {
  padding: 2.16rem 1.13rem 2.06rem 1.53rem;
  align-self: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1.56rem 1.56rem rgba(0, 0, 0, 0.1);
  width: 17.19rem;
  position: relative;
}
.text-wrapper {
  padding: 1.63rem 0;
  color: rgb(0, 0, 0);
  font-size: 0.63rem;
  font-weight: 700;
  line-height: 0.5rem;
  letter-spacing: 0.087rem;
  white-space: nowrap;
  background-image: linear-gradient(165deg, rgb(222, 255, 201) 0%, rgb(163, 248, 255) 100%);
}
.group_2 {
  padding: 0 0.16rem;
  color: rgb(0, 0, 0);
  font-size: 0.69rem;
  line-height: 0.5rem;
  white-space: nowrap;
}
.group_4 {
  margin-top: 2.31rem;
  color: rgb(0, 0, 0);
  font-size: 0.69rem;
  line-height: 0.63rem;
  letter-spacing: 0.069rem;
  white-space: nowrap;
}
.group_9 {
  margin-top: 2.19rem;
}
.group_11 {
  margin-top: 2.19rem;
}
.group_13 {
  margin-top: 1.97rem;
}
.group_15 {
  margin-top: 2.19rem;
  padding-left: 0.063rem;
}
.image_4 {
  margin: 0.094rem 0.22rem 0.094rem 0;
}
.image_6 {
  margin-right: 0.38rem;
}
.group_8 {
  color: rgb(0, 0, 0);
  font-size: 0.69rem;
  line-height: 0.59rem;
  letter-spacing: 0.069rem;
  white-space: nowrap;
}
.text_7 {
  margin: 0.28rem 0;
  color: rgb(0, 0, 0);
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 0.44rem;
  letter-spacing: 0.079rem;
  white-space: nowrap;
}
.group_10 {
  color: rgb(0, 0, 0);
  font-size: 0.69rem;
  line-height: 0.5rem;
  letter-spacing: 0.069rem;
  white-space: nowrap;
}
.text_9 {
  margin: 0.22rem 0;
  color: rgb(0, 0, 0);
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 0.44rem;
  letter-spacing: 0.079rem;
  white-space: nowrap;
}
.group_12 {
  color: rgb(0, 0, 0);
  font-size: 0.69rem;
  line-height: 0.5rem;
  letter-spacing: 0.069rem;
  white-space: nowrap;
}
.text_11 {
  margin: 0.31rem 0 0.28rem;
  color: rgb(0, 0, 0);
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 0.44rem;
  letter-spacing: 0.079rem;
  white-space: nowrap;
}
.group_14 {
  color: rgb(0, 0, 0);
  font-size: 0.69rem;
  line-height: 0.5rem;
  letter-spacing: 0.069rem;
  white-space: nowrap;
}
.text_13 {
  align-self: center;
  color: rgb(0, 0, 0);
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 0.44rem;
  letter-spacing: 0.079rem;
  white-space: nowrap;
}
.group_16 {
  color: rgb(0, 0, 0);
  font-size: 0.69rem;
  line-height: 0.5rem;
  letter-spacing: 0.069rem;
  white-space: nowrap;
}
.text_15 {
  align-self: center;
  color: rgb(0, 0, 0);
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 0.44rem;
  letter-spacing: 0.079rem;
  white-space: nowrap;
}
.image_2 {
  width: 1rem;
  height: 0.94rem;
}
.text_3 {
  margin: 0.19rem 0 0.25rem 1.28rem;
}
.image_5 {
  width: 1.28rem;
  height: 0.66rem;
}
.text_4 {
  margin-left: 1.16rem;
}
.text_6 {
  margin: 0.25rem 0 0.16rem 1.59rem;
}
.image_9 {
  width: 1rem;
  height: 0.88rem;
}
.text_8 {
  margin: 0.16rem 0 0.22rem 1.56rem;
}
.image_10 {
  width: 1rem;
  height: 1.03rem;
}
.text_10 {
  margin: 0.25rem 0 0.28rem 1.59rem;
}
.text_12 {
  margin-left: 1.56rem;
  align-self: center;
}
.image_12 {
  width: 0.88rem;
  height: 1.16rem;
}
.text_14 {
  margin-left: 1.63rem;
  align-self: center;
}
</style>
